<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>电影数据可视化</title>
  <script src="../JS/chart-min.js" defer></script>
  <script src="../JS/echarts.js"></script>
  <script src="../JS/jquery.js"></script>
  <link rel="stylesheet" href="./css/Media queries.css">
  <link rel="stylesheet" href="./css/index.css">
  <link rel="stylesheet" href="./fonts/icomoon.css">
</head>
<body>
    <!-- 最外层容器 -->
    <div class="viewprot">
      <!-- 第一列 -->
      <div class="one">
        <div class="top panel">
          <div class="inner">
              <!-- 筛选 -->
              <div class="filter">
                  <a href="javascript:;" class="active">全部</a>
                  <a href="javascript:;">8-9分</a>
                  <a href="javascript:;">9-9.5分</a>
                  <a href="javascript:;">9.5-10分</a>
              </div>
              <!-- 数据 -->
              <div class="data">
                  <div class="item">
                      <span class="span">
                          <i class="icon-dot" style="color: #ed3f35;"></i>
                          电影数量
                      </span>
                      <h4 class="item-h1" id="total-movies-rating">0</h4>
                  </div>
              </div>
            </div>
        </div>
        
        <div class="bottom panel">
          <div class="main-title">电影时长统计</div>
          <div class="chart-container">
              <canvas id="myChart"></canvas>
          </div>
          <div id="getResult"></div>
        </div>
        <div class="middle panel">
          <h2>电影类型分布</h2>
          <div id="container"></div>
        </div>
      </div>
      <!-- 第二列 -->
      <div class="two">
        <div class="top">
          <div class="map">
                <h3>
                    <span class="icon-cube"></span>
                    地区观影统计
                </h3>
                <div class="chart">
                    <div class="geo" id="country-chart"></div>
                </div>
            </div>
        </div>
        <div class="bottom panel">
          <h1>电影评论排行榜 TOP 20</h1>
          <table id="movies-table">
            <thead>
                <tr>
                    <th>排名</th>
                    <th>电影名称</th>
                    <th>评论数量</th>
                </tr>
            </thead>
          <tbody>
            <!-- 数据将由JS填充 -->
          </tbody>
          </table>
        </div>
      </div>
      <!-- 第三列 -->
      <div class="three">
        <div class="bottom panel">
           <div class="circle" data-degree="60" data-color="#EB8761">
              <div class="number">0<span>%</span></div>
              <h4>英文</h4>
          </div>
          <!-- 示例圆环2 -->
          <div class="circle" data-degree="30" data-color="#eacf19">
              <div class="number">0<span>%</span></div>
              <h4>中文</h4>
          </div>
          <!-- 示例圆环3 -->
          <div class="circle" data-degree="10" data-color="#2ecc71">
              <div class="number">0<span>%</span></div>
              <h4>其他</h4>
          </div>
        </div>
        <div class="top panel">
          <div class="main-title">电影评分统计</div>
          <div class="chart-container">
              <canvas id="pingfen"></canvas>
          </div>
          <div id="getResult"></div>
        </div>
        <div class="middle panel">
          <h2>前10电影评价人数</h2>
          <div class="leida"></div>
        </div>
      </div>
    </div>
    <script src="../JS/leidatu.js"></script>
    <script src="../JS/shichang.js"></script>
    <script src="../JS/leixing.js"></script>
    <script src="../JS/toptwo.js"></script>
    <script src="../JS/zhanbi.js"></script>
    <script src="../JS/pingfen.js"></script>
    <script src="../JS/china.js"></script>
    <script src="../JS/mymap.js"></script>
    <script src="../JS/ratingStats.js"></script>
    <script src="../JS/movieStats.js"></script>
    <script src="../JS/auth.js"></script>
</body>
</html>